<template>
  <div class="practiceConfig">
    <el-form
      ref="baseFormRef"
      :model="baseForm"
      :rules="rules"
      label-width="140px"
    >
      <el-row class="mt-20">
        <el-col :span="18">
          <el-form-item label="抽题规则" prop="interestQuestionRule">
            <el-radio-group
              v-model="baseForm.interestQuestionRule"
              @change="interestQuestionRuleChange"
            >
              <el-radio :label="1">目录</el-radio>
              <el-radio :label="2">标签</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="开放标签"
            prop="interestLabels"
            v-if="baseForm.interestQuestionRule === 2"
          >
            <el-select
              v-model="baseForm.interestLabels"
              multiple
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in labelsOptions"
                :key="index"
                :label="item.fullName"
                :value="item.enCode"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="每组题目数" prop="interestQuestions">
            <el-input-number
              v-model="baseForm.interestQuestions"
              :min="1"
              :precision="0"
              :step="1"
              controls-position="right"
            />题/组
            <div class="tip">每日答题每组显示多少题数</div>
          </el-form-item>
          <el-form-item label="答对积分数" prop="interestPassIntegral">
            <el-input-number
              v-model="baseForm.interestPassIntegral"
              :min="1"
              :precision="0"
              :step="1"
              controls-position="right"
            />分/题
            <div class="tip">每日答题每答对一题得多少积分</div>
          </el-form-item>
          <el-form-item label="积分上限" prop="interestMaxIntegral">
            <el-input-number
              v-model="baseForm.interestMaxIntegral"
              :min="1"
              :precision="0"
              :step="1"
              controls-position="right"
            />分/日
            <div class="tip">每日答题每天最多能获得多少积分</div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              class="saveBtn"
              :loading="btnLoading"
              @click="submitForm('managePracticeConfig')"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { updateSystemConfig } from "@/api/system/sysConfig";
export default {
  name: "managePracticeConfigInterest",
  props: {
    dataForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      btnLoading: false,
      baseForm: {
        interestQuestionRule: "1",
        interestLabels: [],
        interestQuestions: 1,
        interestPassIntegral: 1,
        interestMaxIntegral: 10,
      },
      rules: {
        interestLabels: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        interestQuestions: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        interestPassIntegral: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        interestMaxIntegral: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },

      labelsOptions: [],
    };
  },
  watch: {
    dataForm() {
      this.baseForm = this.dataForm ? this.dataForm : this.baseForm;
    },
  },
  created() {
    this.getLabelsOptions();
  },
  computed: {
    managePracticeConfig() {
      return {
        category: "managePracticeConfig",
        list: [
          // 每日答题配置
          {
            name: "是否按题库目录答题",
            key: "everydayQuestionRule",
            value: this.baseForm.everydayQuestionRule,
          },
          {
            name: "每组题目数",
            key: "everydayQuestions",
            value: this.baseForm.everydayQuestions,
          },
          {
            name: "默认答对积分数密码",
            key: "everydayPassIntegral",
            value: this.baseForm.everydayPassIntegral,
          },
          {
            name: "积分上限",
            key: "everydayMaxIntegral",
            value: this.baseForm.everydayMaxIntegral,
          },
          // 兴趣答题配置
          {
            name: "抽题规则",
            key: "interestQuestionRule",
            value: this.baseForm.interestQuestionRule,
          },
          {
            name: "开放标签",
            key: "interestLabels",
            value: JSON.stringify(this.baseForm.interestLabels),
          },
          {
            name: "每组题目数",
            key: "interestQuestions",
            value: this.baseForm.interestQuestions,
          },
          {
            name: "答对积分数",
            key: "interestPassIntegral",
            value: this.baseForm.interestPassIntegral,
          },
          {
            name: "积分上限",
            key: "interestMaxIntegral",
            value: this.baseForm.interestMaxIntegral,
          },
          // 模拟/自主练习设置
          {
            name: "是否按题库目录答题",
            key: "practiceQuestionRule",
            value: this.baseForm.practiceQuestionRule,
          },
          {
            name: "答题时长",
            key: "practiceTimes",
            value: this.baseForm.practiceTimes,
          },
          {
            name: "总题数",
            key: "practiceQuestions",
            value: this.baseForm.practiceQuestions,
          },
          {
            name: "试卷总分",
            key: "practiceTotalScore",
            value: this.baseForm.practiceTotalScore,
          },
          {
            name: "及格分",
            key: "practicePassScore",
            value: this.baseForm.practicePassScore,
          },
        ],
      };
    },
  },
  methods: {
    interestQuestionRuleChange(val) {
      console.log("interestQuestionRule", val);
    },
    // 获取题库试题选项
    getLabelsOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "questionLabels",
        })
        .then((res) => {
          this.labelsOptions = res;
        });
    },
    /**保存 */
    submitForm(category) {
      this.btnLoading = true;
      console.log("category", category);
      // 安全设置
      if (category == "managePracticeConfig") {
        updateSystemConfig(this.managePracticeConfig)
          .then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.btnLoading = false;
              },
            });
          })
          .catch(() => {
            this.btnLoading = false;
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.practiceConfig {
  padding: 0;

  .saveBtn {
    width: 100px;
  }

  .tip {
    font-size: 14px;
    color: #a5a5a5;
  }

  .lockTime {
    line-height: 32px;
    padding-right: 12px;
    color: #606266;
    font-size: 14px;
  }
}
</style>
